<script setup>
import { ref } from 'vue';
defineProps(['list'])
defineEmits(['add'])
let menu = ref(true)
</script>
<template>
   <ul>
    <li v-for="item in list" class="ac">
    {{ item }}
</li>
   </ul>
   <button v-show="menu" @click="menu=!menu">++</button>
   <input v-show="!menu" type="text" @keyup.enter="$emit('add',$event.target.value)">
</template>
<style scoped>
ul{
   display: flex;
   gap: 20px;
}
.ac{
   width:80px;
   height: 50px;
   border: 1px solid red;
   text-align: center;
   background-color: red;
   color: chartreuse;
}
</style>